import styles from "./sidebar.module.scss";

import ChatGPTIcon from "../../icons/chatgpt-1.svg";
import ChatGPTActiveIcon from "../../icons/chatgpt-1-active.svg";
import ChatIcon from "../../icons/chat-1.svg";
import ChatActiveIcon from "../../icons/chat-1-active.svg";
import RoleIcon from "../../icons/role-1.svg";
import RoleActiveIcon from "../../icons/role-1-active.svg";
import ExitIcon from "../../icons/exit.svg";
import MinIcon from "../../icons/min.svg";
import MaxIcon from "../../icons/max.svg";

import {useLocation, useNavigate} from "react-router-dom";
import {IconButton} from "@/app/components/button/button";
import {Path} from "@/app/constants";
import {useAppConfig} from "@/app/store/config";

export function SideBar() {
    const navigate = useNavigate();
    const location = useLocation(); // 获取当前路由
    const config = useAppConfig();

    return (
        <div className={styles.sidebar}>
            <div className={styles["action-button"]}>
                <IconButton icon={<ExitIcon/>} backgroundColor={"#ff4e4e"} onClick={() => alert("尚未实现")}/>

                <IconButton icon={<MinIcon/>} backgroundColor={"#f3c910"} onClick={() => {
                    config.update(
                        (config) => (config.tightBorder = false),
                    );
                }}/>
                <IconButton icon={<MaxIcon/>} backgroundColor={"#04c204"} onClick={() => {
                    config.update(
                        (config) => (config.tightBorder = true),
                    );
                }}/>
            </div>

            <div
                className={`${styles["sidebar-item"]} ${location.pathname.includes(Path.Home) ? styles["sidebar-active"] : ""}`}>
                <div
                    className={styles["sidebar-header"]}
                    onClick={() => {
                        navigate(Path.Home)
                    }}>
                    {location.pathname.includes(Path.Home) ? <ChatGPTActiveIcon/> : <ChatGPTIcon/>}
                </div>
            </div>

            <div
                className={`${styles["sidebar-item"]} ${location.pathname.includes(Path.Chat) ? styles["sidebar-active"] : ""}`}>
                <div
                    className={styles["sidebar-chat"]}
                    onClick={() => {
                        navigate(Path.Chat)
                    }}>
                    {location.pathname.includes(Path.Chat) ? <ChatActiveIcon/> : <ChatIcon/>}
                </div>
            </div>
            <div
                className={`${styles["sidebar-item"]} ${location.pathname.includes(Path.Role) ? styles["sidebar-active"] : ""}`}>
                <div
                    className={styles["sidebar-role"]}
                    onClick={() => {
                        navigate(Path.Role)
                    }}>
                    {location.pathname.includes(Path.Role) ? <RoleActiveIcon/> : <RoleIcon/>}
                </div>
            </div>
        </div>
    )
}
